﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>tabcontrol</title>

    <!-- WinJSContrib.Core references -->
    <script src="/Scripts/jquery-2.1.1.js"></script>
    <script src="/scripts/winjscontrib/jquery.mcnext.WinJS.js"></script>
    <script src="/scripts/winjscontrib/mcnext.ui.utils.js"></script>

    <!-- WinJSContrib.Tab references -->
    <link href="/css/winjscontrib/mcnext.ui.tab-pages.css" rel="stylesheet" />
    <script src="/scripts/winjscontrib/mcnext.ui.tab-pages.js"></script>

    <link href="tabcontrol.css" rel="stylesheet" />
    <script src="tabcontrol.js"></script>
</head>
<body>
    <div class="tabcontrol fragment">
        <header aria-label="Header content" role="banner">
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">tab control</span>
            </h1>
            <div class="codelink" data-codepage="/pages/tab/tabcontrol"><span class="symbol">&#xE160;</span><span class="text">show me the code !</span></div>
        </header>
        <section id="tabctrl" aria-label="Main content" role="main" class="arrowright" data-win-control="MCNEXT.UI.TabPages" data-win-options="{ headerTemplate: select('#tabheaderTemplate')}"></section>
        <div id="tabheaderTemplate" data-win-control="WinJS.Binding.Template">
            <div>
                <div class="title" data-win-bind="innerText : title"></div>
            </div>
        </div>
    </div>
</body>
</html>
